<template>
  <div class="bg">
    <div class="login">
      <div style="width: 50%; height: 600px">
        <img style="width: 100%" src="../../public/login_backgroup.jpg" />
      </div>
      <div style="width: 50%; height: 600px">
        <div style="height: 86px; margin: 60px 0 50px 0; text-align: center">
          <img
            style="width: 204px; height: 86px"
            src="../../public/login_logo.png"
          />
          <div style="width: 80%; margin: 40px auto 0">
            <ul style="font-size: 14px">
              <li @click="count = 1" :class="{ active: count == 1 }">
                <a>账号密码登录</a>
              </li>
              <li @click="count = 2" :class="{ active: count == 2 }">
                <a>短信验证登录</a>
              </li>
            </ul>
            <div>
              <div class="passlogin" v-show="count == 1">
                <div class="input-group-addon">
                  <span style="height: 40px; background-color: #f5f5f5">
                    <img
                      style="width: 20px; height: 20px"
                      src="../../public/icon/login_user.png"
                      alt=""
                    />
                  </span>
                  <input
                    maxlength="11"
                    v-model="logindata.username"
                    type="text"
                    placeholder="请输入用户名"
                  />
                </div>
                <div class="input-group-addon">
                  <span style="height: 40px; background-color: #f5f5f5">
                    <img
                      style="width: 20px; height: 20px"
                      src="../../public/icon/login_password.png"
                      alt=""
                    />
                  </span>
                  <input
                    v-model="logindata.password"
                    type="password"
                    placeholder="请输入密码"
                  />
                </div>
                <button @click="submit">立即登录</button>
                <div style="margin: 10px 0" class="loginUser">
                  <a
                    href="#"
                    class="pull-left"
                    @click="router.push('/register')"
                    >跳转到注册页面</a
                  >
                  <a
                    href="#"
                    class="pull-left"
                    @click="router.push('/home/index')"
                    style="text-align: right"
                    >跳转到首页</a
                  >
                </div>
              </div>
              <div class="messlogin" v-show="count == 2">
                <div class="input-group-addon">
                  <span style="height: 40px; background-color: #f5f5f5">
                    <img
                      style="width: 20px; height: 20px"
                      src="../../public/icon/login_phone.png"
                      alt=""
                    />
                  </span>
                  <input
                    maxlength="11"
                    type="text"
                    placeholder="请输入手机号码"
                  />
                </div>
                <div class="input-group-addon">
                  <span
                    style="
                      width: 80px;
                      height: 40px;
                      background-color: #f5f5f5;
                      position: relative;
                    "
                  >
                    <div
                      style="
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        text-align: center;
                        user-select: none;
                        width: 80px;
                        height: 40px;
                        position: absolute;
                        left: 0px;
                        top: 0px;
                      "
                      @click="rando"
                      :style="`color:${colors}`"
                    >
                      {{ code }}
                    </div>
                  </span>
                  <input type="text" placeholder="请输入图片中数字或字母" />
                </div>
                <div class="input-group-addon">
                  <span style="height: 40px; background-color: #f5f5f5">
                    <img
                      width="20px"
                      height="20px"
                      src="../../public/icon/login_password.png"
                      alt=""
                    />
                  </span>
                  <input type="password" placeholder="请输入验证码" />
                  <span
                    style="
                      height: 40px;
                      background-color: #f5f5f5;
                      border-left: 1px solid #ccc;
                    "
                  >
                    <p style="font-size: 14px">获取验证码</p>
                  </span>
                </div>
                <button>立即登录</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
	import {ElMessage } from 'element-plus'
import httpApi from "@/http";
import { random } from "lodash";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
const count = ref(1);
const code = ref("");
const colors = ref("");

const router = useRouter();

const logindata = reactive({
  username: "",
  password: "",
});

function rando() {
  code.value = "";
  for (var i = 0; i < 6; i++) {
    code.value += parseInt(Math.random() * 10 + "") + "";
  }
  colors.value = "#";
  for (var i = 0; i < 6; i++) {
    colors.value += Math.floor(Math.random() * 16).toString(16);
  }
}
rando();

function logon() {}

function submit() {
  let params = { phone: logindata.username, password: logindata.password };
  console.log(params);
  if (logindata.username !== "" && logindata.password !== "") {
    httpApi.LoginApi.userLogin(params).then((res) => {
      console.log("111", res);
      if (res.data.code == 200) {
        router.push({ path: "/home/index" });
      } else {
        alert("账号或密码输入错误");
      }
    });
  } else {
    ElMessage.error("请输入用户名和密码");
    return;
  }
}
</script>

<style scoped>
.bg {
  height: 800px;
  /* background: url(../../public/bg.jpg) no-repeat center center; */
  background-size: 100%;
  padding-top: 100px;
}

.active {
  border-bottom: 3px solid #337ab7;
  color: #337ab7;
}

.login {
  width: 800px;
  height: 600px;
  max-width: 800px;
  background: #fff;
  margin: 0 auto;
  border-radius: 15px;
  border: 1px solid #ccc;
  box-shadow: 5px 5px 15px 5px #ccc;
  display: flex;
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
}

ul {
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid #ccc;
}

ul li {
  list-style: none;
  padding: 10px 30px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.input-group-addon {
  height: 40px;
  display: flex;
  align-items: center;
  margin: 25px 0;
}

.input-group-addon {
  width: 319px;
  display: flex;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.input-group-addon span {
  padding: 10px 10px 0;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.input-group-addon input {
  flex: 1;
  padding: 11px 0;
  border: none;
  outline: none;
  padding-left: 10px;
}

button {
  padding: 10px 130px;
  border-radius: 5px;
  background-color: #286090;
  border: 1px solid #204d74;
  color: white;
}

.pull-left {
  color: #23527c;
  text-decoration: none;
  padding-left: 0;
  font-size: 12px;
  display: block;
  width: 100%;
  text-align: left;
}
.loginUser {
  display: flex;
  justify-content: space-between;
}
</style>
